/**
* Created by wl
* 项目管理>持有中-详情页-投资服务信息
*/
<template>
    <div class="ca-box-border-top-none">
        <div v-for="(item, index) in alarmProjectList" :key="index">
           <div v-if="!item.showEdit">
                <el-form :from="item">
                    <div class="el-border-bottom">
                        <el-row class="after-row ca-p-10">
                            <el-col :span="8">
                                <div class="after-form-input">
                                    <div class="alarm-time">预警时间：
                                        <span>{{item.groupDate}}</span>
                                        <el-button type="text" size="small">{{item.itemFinanceManagement.teamProposal == null ? '未处理' : item.itemFinanceManagement.holdStrategy == null ? '未处理' : '已处理'}}</el-button></div>
                                </div>
                            </el-col>
                            <el-col :span="4" class="align-r ca-pull-right">
                                <button type="button" @click="item.dropDown=false" class="ca-btn-switch ca-btn-default ca-m-l-10" v-if="item.dropDown"><i class="el-icon-arrow-down ca-m-r-5"></i><span>收起</span></button>
                                <button type="button" @click="item.dropDown=true" class="ca-btn-switch ca-btn-default ca-m-l-10" v-else><i class="el-icon-arrow-up ca-m-r-5"></i><span>展开</span></button>
                                <el-button type="text" class="ca-edit-btn el-icon-edit ca-m-r-10 edit-btn" @click="showEditPage(index)" :disabled="!isAuthIndexSee">编辑</el-button>
                            </el-col>
                        </el-row>
                        <div v-if="item.dropDown">
                            <el-row class="after-row ca-p-10" >
                                <el-col :span="4" class="ca-align-left ca-m-l-30" >
                                    <span class="alarm-label-name">项目组建议持有策略：</span>
                                </el-col>
                                <el-col :span="4"><span class="alarm-label-info">{{item.itemFinanceManagement.teamProposal | getNameById('investStrategyType')}}</span></el-col>
                                <el-col :span="4" class="ca-align-right" >
                                    <span class="alarm-label-name">建议时间：{{item.itemFinanceManagement.lastManagementTime == null ? '' : $moment(item.itemFinanceManagement.lastManagementTime).format('YYYY-MM-DD')}}</span>
                                </el-col>
                            </el-row>
                            <el-row class="after-row ca-p-10">
                                <el-col :span="4" class="ca-align-left ca-m-l-30"><span class="alarm-label-name">投后建议持有策略：</span></el-col>
                                <el-col :span="4"><span class="alarm-label-info">{{item.itemFinanceManagement.holdStrategy | getNameById('investStrategyType')}}</span></el-col>
                                <el-col :span="4" class="ca-align-right" >
                                    <span class="alarm-label-name">建议时间：{{item.itemFinanceManagement.lastManagementTime == null ? '' : $moment(item.itemFinanceManagement.lastManagementTime).format('YYYY-MM-DD')}}</span>
                                </el-col>
                            </el-row>
                            <el-row class="after-row ca-p-10">
                                <el-col :span="2" class="ca-align-left ca-m-l-30" ><span class="alarm-label-name">备注：</span></el-col>
                                <el-col :span="18"><span class="alarm-label-info">{{item.itemFinanceManagement.note}}</span></el-col>
                            </el-row>
                            <el-row class="after-row">
                                <el-col :span="24">
                                    <div class="after-form-list alarm-table">
                                        <table class="ca-table">
                                            <thead>
                                            <tr>
                                                <th width="20%">预警类型</th>
                                                <th width="20%">规则</th>
                                                <th>公式</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(itemInfo, ind) in item.itemFinanceRemindResults" :key="ind">
                                                    <td width="7%">
                                                        <span >{{itemInfo.remindLevel == 1 ? '关注' : '预警' }}</span>
                                                    </td>
                                                    <td width="10%">{{itemInfo.title}}</td>
                                                    <td v-if="itemInfo.symbol != '介于'">{{itemInfo.remindKey}}{{itemInfo.symbol}}{{itemInfo.threshold}}</td>
                                                    <td v-else>{{itemInfo.remindKey}}{{itemInfo.symbol}}{{itemInfo.threshold}}--{{itemInfo.threshold2}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-form>
            </div>
            <csEarlyWarning v-else @close="close" :index="index" @save="save" :alarmInfo='item'></csEarlyWarning> 
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { addRemind, isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                isAuthIndexSee: isNoAuth('持有中项目-项目预警-编辑'),
                alarmProjectList: [], //项目预警列表
                ind: null,
            }
        },
        watch: {
        },
        props: {
            showBtn: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
        },
        mounted() {
            this.alarmList()
        },
        methods: {
            alarmList() {
                apiHttp(api.ALARM_LIST, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        ret.data.map(item => {
                            if (this.ind !== null) {
                                item.dropDown = false
                                item.showEdit = false
                                ret.data[this.ind].dropDown = true
                            } else {
                                item.dropDown = false
                                item.showEdit = false
                            }
                        })
                        this.alarmProjectList = ret.data
                    }
                })
            },
            showEditPage(index) {
                this.alarmProjectList[index].showEdit = true
                this.ind = index
            },
            close(index) {
                this.alarmProjectList[index].showEdit = false
                // this.showEdit = false
                // this.alarmList()
            },
            async save() {
                // this.alarmProjectList[index].showEdit = false
                // this.showEdit = false
                await this.alarmList();
                // 添加小红点
                await addRemind({
                    dataId: this.$route.params.itemId, // 业务id
                    dataTab: 6, // tab页顺序 head 也为0 新建为'-1'
                    dataType: 2, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                });
                // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                this.$root.Dot.$emit('getDotList');
                // 添加小红点 end
            },
        },
        components: {
            csEarlyWarning: require('./edit'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-btn {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #d70c18;
    font-size: 12px;
    padding: 0;
    float: right;
}
.edit-btn {
    float: right;
    cursor: pointer;
    margin-left: 10px;
}
.warn_type_color {
    font-weight: bold;
    color:red
}
.focus_type_color {
    font-weight: bold;
    color: orange
}
.alarm-change-btn{
    border:0;
    color:#d70c18;
    span{
        color:#333;
    }
}
.after-form-list {
    width: 90%;
    margin: 0 auto;
}
.alarm-time{
    font-size:18px;
    color:#333;
    margin-top: 10px;
    margin-left: 30px;
    span{
        font-size:14px;
        color:#999;
        margin-right:20px;
    }
}
.ca-pull-right {
    float: right;
    margin-top: 10px;
}
.alarm-label-name{
    font-size:14px;
    color:#666;
}
.alarm-label-info{
    font-size:12px;
    color:#666;
    vertical-align: middle;
    display:inline-block;
    margin-top:2px;
}
.alarm-table tr td{
    color:#666;
    font-size:12px;
}
.ca-m-l-10 {
    margin-left: 44px;
    margin-top: 5px;
}
.el-border-bottom {
    background: #fff;
    border-bottom: #dbe3ea 1px solid;
}
.ca-box-border-top-none {
    background: #fff;
    border-top: none;
}
.ca-m-l-30 {
    margin-left: 30px;
}
.ca-table {
    width: 100%;
    border: #dbe3ea 1px solid;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>
